import React from 'react'
import './Yi.css'
import {
	ArrowLeftOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Tabs } from 'react-vant'
import '../style.less'
import { Loading } from 'react-vant';
export default function Yi() {
    const navigate = useNavigate()
    const items = Array.from({ length: 2 }, (_, i) => i + 1)
  return (
    <div>
        <div className='ws-yi-jt'>
        <ArrowLeftOutlined style={{fontSize:'20px'}} 
        onClick={()=>{
            navigate('/home')
        }} />
        </div>
        <div className='ws-yi-tx'>
          <img src="/img/17.jpg" alt="" />
          <h2>Shawn Mendes</h2>
          <span>加拿大男歌手</span><br />
          <span>粉丝 10.5W &nbsp;&nbsp;&nbsp;群组15</span><br />
          <button>+关注</button>
        </div>
        <div className='demo-tabs'>
        <Tabs defaultActive={2}>
        {items.map(item => (
          <Tabs.TabPane  key={item} title={`演出${item}`}>
           

          <div className='ws-tj-bt'>
				<div className='ws-tj-ys'>
					<img src="/img/21.jpg" alt="" />
					<div>
						<p style={{ marginLeft: '20px' }}><b>话剧【恋爱中的犀牛】</b></p>
						<span style={{ marginLeft: '20px' }}>2024.06.13-2024.06.15</span><br />
						<span style={{ marginLeft: '20px' }}>北京今日美术馆</span>
						<p style={{ marginLeft: '20px', marginTop: '50px' }}><b>￥ 990.0</b></p>
					</div>
				</div>

				<div className='ws-tj-ys'>
					<img src="/img/22.jpg" alt="" />
					<div>
						<p style={{ marginLeft: '20px' }}><b>舞台剧【虚无的十字架】</b></p>
						<span style={{ marginLeft: '20px' }}>2024.06.13-2024.06.15</span><br />
						<span style={{ marginLeft: '20px' }}>北京今日美术馆</span>
						<p style={{ marginLeft: '20px', marginTop: '50px' }}><b>￥ 600.0</b></p>
					</div>
				</div>

				<div className='ws-tj-ys'>
					<img src="/img/23.jpg" alt="" />
					<div>
						<p style={{ marginLeft: '20px' }}><b>肖邦协奏曲音乐会</b></p>
						<span style={{ marginLeft: '20px' }}>2024.06.13-2024.06.15</span><br />
						<span style={{ marginLeft: '20px' }}>北京今日美术馆</span>
						<p style={{ marginLeft: '20px', marginTop: '50px' }}><b>￥ 900.0</b></p>
					</div>
				</div>

				<div className='ws-tj-ys'>
					<img src="/img/24.jpg" alt="" />
					<div>
						<p style={{ marginLeft: '20px' }}><b>音乐剧【仲夏夜之梦】</b></p>
						<span style={{ marginLeft: '20px' }}>2024.06.13-2024.06.15</span><br />
						<span style={{ marginLeft: '20px' }}>北京今日美术馆</span>
						<p style={{ marginLeft: '20px', marginTop: '50px' }}><b>￥ 1990.0</b></p>
					</div>
				</div>
			</div>
			<div>
				<Loading size="24px" style={{ marginLeft: '130px' }}>正在加载</Loading>
			</div>
          </Tabs.TabPane>
        ))}
      </Tabs>
        </div>
    </div>
  )
}
